<template>
  <div id="app">
  <div class="add" @click="toPublishh">
  <img src="../../../assets/Add2.png" class="img"></img>
  </div>
    
    <headd></headd>
    <selectt @changeCategory="changeCategory"></selectt>
    <div class="wrapper" ref="wrapper">
      <div class="contain">
        <div class="content" v-for="item in array" :key="item[2]">
          <block
            :img="item[3]"
            :category="item[0]"
            :num="item[4]"
            @click.native="dian(item[0])"
          ></block>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import block from "../../../components/block/index.vue";
import BScroll from "better-scroll";
import headd from "../../../components/head/index.vue";
import selectt from "../../../components/selector/index.vue";
export default {
  data() {
    return {
      category: "学习",
      array: [],
    };
  },
  methods: {
    toPublishh(){
      this.$router.push({
        path: "/publish"
      });
    },
    dian(res) {
      this.$router.push({
        path: "/activilist",
        query: {
          category: res,
        },
      });
    },
    changeCategory(res) {
      // console.log(res);
      var that = this;
      this.axios
        .get("http://120.78.199.38:9000/newgetActivity", {
          params: {
            fen: res,
          },
        })
        .then((res) => {
          that.array = res.data;
        });
    },
  },
  watch: {
    array: function() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          mouseWheel: true, //开启鼠标滚轮
          disableMouse: false, //启用鼠标拖动
          disableTouch: false, //启用手指触摸
          click: true,
        });
      });
    },
  },
  components: {
    headd,
    selectt,
    block,
  },
  created() {
    var that = this;
    this.axios
      .get("http://120.78.199.38:9000/newgetActivity", {
        params: {
          fen: that.category,
        },
      })
      .then((res) => {
        // console.log(res.data);
        that.array = res.data;
      });
  },
};
</script>
<style scoped>
#app {
  height: 93%;
  width: 100%;
}
.wrapper {
  position: relative;
  height: 56%;
  width: 100%;
  background-color: rgb(236, 234, 240);
  overflow: hidden;
}
.contain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
ul {
  list-style: none;
  margin: 0;
}
.content {
  height: 18vh;
  width: 33%;
}
.add{
position: absolute;
width: 60px;
height: 60px;
z-index: 100;
bottom: 7%;
right: 10px;
}
.img{
height: 100%;
width: 100%;
position: absolute;
bottom: 10px;
}
</style>
